<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 头部 -->
      <el-row  class="row-bg" type="flex" justify="space-between">
        <el-col :span="4">
        <span class="title">
          说明：目前支持学科和关键字条件筛选
        </span>
        </el-col>
        <el-col :span="2"><el-button type="success" icon="el-icon-edit" size="small" @click="AddChoice">新增题库</el-button></el-col>
      </el-row>
      <!-- main -->
      <!-- 表单 -->
      <el-form ref="choiceform" :model="form" label-width="80px" inline size="small">
        <el-row>
          <el-col :span="6">
          <el-form-item label="学科" style="width: 100%">
            <el-select v-model="form.subjectID" placeholder="请选择">
              <el-option :label="item.label" :value="item.value" v-for=" (item,index) in subjectsLis" :key='index'></el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col :span="6">
          <el-form-item label="二级目录" style="width: 100%">
          <el-select v-model="form.catalogID" placeholder="请选择">
            <!-- <el-option label="区域一" value="shanghai"></el-option> -->
          </el-select>
        </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" style="width: 100%">
            <el-select v-model="form.tags" placeholder="请选择">
              <!-- <el-option label="区域一" value="shanghai"></el-option> -->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="关键字" style="width: 100%">
            <el-input v-model="form.keyword" placeholder="请根据题干搜索"></el-input>
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="6">
          <el-form-item label="试题类型" style="width: 100%">
            <el-select v-model="form.questionType" placeholder="请选择">
              <el-option label="单选" value="1"></el-option>
              <el-option label="多选" value="2"></el-option>
              <el-option label="简答" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="难度" style="width: 100%">
          <el-select v-model="form.difficulty" placeholder="请选择">
            <el-option label="简单" value="1"></el-option>
              <el-option label="一般" value="2"></el-option>
              <el-option label="困难" value="3"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="方向" style="width: 100%">
          <el-select v-model="form.direction" placeholder="请选择">
            <el-option label="o2o" value="o2o"></el-option>
            <el-option label="外包服务" value="外包服务"></el-option>
            <el-option label="企业服务" value="企业服务"></el-option>
            <el-option label="互联网金融" value="互联网金融"></el-option>
            <el-option label="企业咨询" value="企业咨询"></el-option>
            <el-option label="互联网" value="互联网"></el-option>
            <el-option label="电子商务" value="电子商务"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="6">
        <el-form-item label="录入人" style="width: 100%">
          <el-select v-model="form.creatorID" placeholder="请选择">
            <el-option :label="item.username" :value="item.id" v-for="item in userList" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="6">
        <el-form-item label="题目备注" style="width: 100%"  class="input">
          <el-input v-model="form.remarks"></el-input>
        </el-form-item>
        </el-col>
         <el-col :span="6">
        <el-form-item label="企业简称" style="width: 100%">
          <el-input v-model="form.shortName"></el-input>
        </el-form-item>
        </el-col>
         <el-col :span="6">
        <el-form-item label="城市" size="mini" style="width: 100%">
          <el-select v-model="form.city" placeholder="请选择" style="width: 114px; margin-right: 5px" @change="changeCity">
            <el-option :label="item" :value="item" v-for="(item,index) in provinces" :key="index"></el-option>
          </el-select>
          <el-select v-model="form.province" placeholder="请选择" style="width: 114px">
            <el-option :label="item" :value="item" v-for="(item,index) in citys" :key="index"></el-option>
          </el-select>
        </el-form-item>
        </el-col>
        <el-col :span="6">
          <div class="clearSaveBtn">
            <el-button size="small" @click="clearFrom">清除</el-button>
            <el-button type="primary" size="small" @click="getTableList">搜索</el-button>
          </div>
        </el-col>
        </el-row>
      </el-form>
      <!-- tab导航栏 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all"><choice-tabeitem :Tablelist="Tablelist" :subjectsLis="subjectsLis" :counts="total"/></el-tab-pane>
        <el-tab-pane label="待审核" name="0"><choice-tabeitem :Tablelist="Tablelist" :subjectsLis="subjectsLis" :counts="total"/></el-tab-pane>
        <el-tab-pane label="已审核" name="1"><choice-tabeitem :Tablelist="Tablelist" :subjectsLis="subjectsLis" :counts="total"/></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"><choice-tabeitem :Tablelist="Tablelist" :subjectsLis="subjectsLis" :counts="total"/></el-tab-pane>
      </el-tabs>
      <!-- 分页 -->
        <div class="page">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[1, 3, 5, 10]"
                :page-size="form.pagesize"
                layout="prev, pager, next,sizes, jumper"
                :total="total">
              </el-pagination>
        </div>
    </el-card>
  </div>
</template>

<script>
import choiceTabeitem from '../components/choice-tabItem'
import { simple } from '@/api/hmmm/subjects'
import { Usersimple } from  '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import { choice } from '@/api/hmmm/questions'
export default {
  data () {
    return {
      // form: {
      //   subjectID: '',
      //   catalogID: '', // 目录
      //   tags: '',
      //   keyword: '',
      //   questionType: '', // 试题类型
      //   difficulty: '', // 难度
      //   direction: '', // 方向
      //   creatorID: '', // 录入人
      //   remarks: '',// 录入备注
      //   shortName: '', // 企业简介
      //   city: '',
      //   province: ''
      // },
      form: {
        page: 1,
        pagesize: 3,
      },
      total: 0,
      activeName: 'all',
      currentPage4:0,
      subjectsLis: [], // 简单学科列表
      userList: [],
      provinces: [],
      citys: [],
      Tablelist: [],
      counts: 0, // 获取数据总数
    }
  },
  created () {
    this.getsubjectsList()
    this.getUserList()
    this.getcity()
    this.getTableList()
  },
  components: {
    choiceTabeitem
  },
  methods: {
    form () {
      
    },
    handleClick () { // 切换选项卡
      if (this.activeName !== 'all' ) {
        this.form.chkState = this.activeName - 0
       } else {
         this.form.chkState = null
       }
       this.getTableList()
    },
    handleSizeChange (val) { // 分页大小变化
      this.form.pagesize = val
      this.getTableList()
    },
    handleCurrentChange (val) { // 换页
      this.form.page = val
      this.getTableList()
    },
    getsubjectsList () { // 获取学科
      simple()
        .then(data => {
          this.subjectsLis = data.data
        })
        .catch(err => {
          this.$message.e('错了哦，这是一条错误消息')
        })
    },
    getUserList () { // 获取用户
      Usersimple()
        .then(data => {
          this.userList = data.data
        })
        .catch(e => {
          this.$message.e('错了哦，这是一条错误消息')
        })
    },
    getcity () {
     this.provinces = provinces()
    },
    changeCity () {
      this.citys = citys(this.form.city)
    },
    clearFrom () { // 重置
       this.form = {
        page: 1,
        pagesize: 3,
      }
       this.getTableList()
    },
    getTableList() {
      choice(this.form)
        .then(data => {
          this.Tablelist = data.data.items
          this.total = data.data.counts
        })
        .catch(e => {
          console.log(e)
        })
    },
    AddChoice () { // 新增题录
      console.log(1);
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding: 0 20px;
  padding-left:10px ;
  margin: 10px 0;
  .title {
    font-size: 12px;
    color: pink;
  }
  .row-bg  {
    margin-bottom: 15px;
  }
  /deep/.el-input--small .el-input__inner {
    width: 236px;
  }
  /deep/.el-row:nth-child(1) .el-col:nth-child(4) .el-input--small .el-input__inner {
    width: 188px;
  }
  /deep/.el-row:nth-child(3) .el-col:nth-child(1) .el-input--small .el-input__inner {
    width: 188px;
  }
  /deep/.el-row:nth-child(3) .el-col:nth-child(2) .el-input--small .el-input__inner {
    width: 188px;
  }
  .clearSaveBtn {
    float: right;
  }
  .page {
    text-align: right;
    /deep/.el-pagination__jump {
      margin: 0;
    }
  }
}
</style>